<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <el-form v-if="crud.props.searchToggle" size="small" label-width="100px">
        <!-- 搜索 -->
        <el-row :gutter="10">
          <el-col :xs="24" :sm="20" :md="6" :lg="6" :xl="6">
            <el-form-item :label="tf('locale')">
              <Dictionary v-model="query.locale" :updata-dict="query.locale" :dict-key="'LOCALE'" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="20" :md="6" :lg="6" :xl="6">
            <el-form-item :label="tf('cataType')">
              <Dictionary v-model="query.cataType" :updata-dict="query.cataType" :dict-key="'SYS_CATA_TYPE'" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="20" :md="6" :lg="6" :xl="6">
            <el-form-item :label="tf('system')">
              <el-input v-model="query.system" clearable :placeholder="tf('system')" class="filter-item" @keyup.enter.native="crud.toQuery" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="20" :md="6" :lg="6" :xl="6">
            <el-form-item :label="tf('module')">
              <el-select v-model="query.module" :placeholder="tf('module')" clearable filterable>
                <el-option v-for="item in menuParentList" :key="item.id" :label="item.text + ':' + item.id" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="20" :md="6" :lg="6" :xl="6">
            <el-form-item :label="tf('code')">
              <el-input v-model="query.code" clearable :placeholder="tf('code')" class="filter-item" @keyup.enter.native="crud.toQuery" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="20" :md="6" :lg="6" :xl="6">
            <el-form-item :label="tf('name')">
              <el-input v-model="query.name" clearable :placeholder="tf('name')" class="filter-item" @keyup.enter.native="crud.toQuery" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="20" :md="6" :lg="6" :xl="6">
            <el-form-item :label="tf('remark')">
              <el-input v-model="query.remark" clearable :placeholder="tf('remark')" class="filter-item" @keyup.enter.native="crud.toQuery" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="20" :md="6" :lg="6" :xl="6">
            <el-form-item :label="tf('enabled')">
              <Dictionary v-model="query.enabled" :updata-dict="query.enabled" :dict-key="'ENABLE_FLAG'" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="20" :md="6" :lg="6" :xl="6">
            <el-form-item :label="tf('refer')">
              <!--<el-input v-model="query.refer" clearable placeholder="表名称"
              class="filter-item" @keyup.enter.native="crud.toQuery" />-->
              <el-select v-model="query.refer" :placeholder="tf('refer')" clearable filterable>
                <el-option v-for="item in tables" :key="item.label" :label="item.label" :value="item.key" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="20" :md="6" :lg="6" :xl="6">
            <el-form-item label="" label-width="28px">
              <rrOperation :crud="crud" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission">
        <template slot="right">
          <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="scanVisible = true">{{ tf('scan') }}</el-button>
          <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="toPreview">{{ tf('preview') }}</el-button>
        </template>
      </crudOperation>
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="75%">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="120px">
          <el-row :gutter="10">
            <el-col :xs="24" :sm="20" :md="12" :lg="12" :xl="12">
              <el-form-item :label="tf('locale')" prop="locale">
                <Dictionary v-model="form.locale" :updata-dict="form.locale" :dict-key="'LOCALE'" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="20" :md="12" :lg="12" :xl="12">
              <el-form-item :label="tf('cataType')">
                <Dictionary v-model="form.cataType" :updata-dict="form.cataType" :dict-key="'SYS_CATA_TYPE'" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="20" :md="12" :lg="12" :xl="12">
              <el-form-item :label="tf('module')">
                <el-select v-model="form.module" :placeholder="tf('module')" clearable filterable>
                  <el-option v-for="item in menuParentList" :key="item.id" :label="item.text + ':' + item.id" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="20" :md="12" :lg="12" :xl="12">
              <el-form-item :label="tf('code')" prop="code">
                <el-input v-model="form.code" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="20" :md="12" :lg="12" :xl="12">
              <el-form-item :label="tf('name')" prop="name">
                <el-input v-model="form.name" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="20" :md="12" :lg="12" :xl="12">
              <el-form-item :label="tf('refer')">
                <el-select v-model="form.refer" :placeholder="tf('refer')" clearable filterable>
                  <el-option v-for="item in tables" :key="item.label" :label="item.label" :value="item.key" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="20" :md="12" :lg="12" :xl="12">
              <el-form-item :label="tf('remark')" prop="remark">
                <el-input v-model="form.remark" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="20" :md="12" :lg="12" :xl="12">
              <el-form-item :label="tf('enabled')" prop="enabled">
                <Dictionary v-model="form.enabled" :updata-dict="form.enabled + ''" :dict-key="'ENABLE_FLAG'" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">{{ $t('btn.cancel') }}</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">{{ $t('btn.confirm') }}</el-button>
        </div>
      </el-dialog>

      <el-dialog :close-on-click-modal="false" :visible.sync="scanVisible" :title="tf('scanTitle')">
        <el-form ref="scanForm" :rules="rules" size="small" label-width="120px">
          <el-row>
            <el-col>
              <el-form-item :label="tf('refer')">
                <el-select v-model="scanRefer" :placeholder="tf('refer')" clearable filterable>
                  <el-option v-for="item in tables" :key="item.label" :label="item.label" :value="item.key" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="scanHandler">{{ $t('btn.confirm') }}</el-button>
          <el-button type="text" @click="scanVisible = false">{{ $t('btn.close') }}</el-button>
        </div>
      </el-dialog>

      <el-dialog :close-on-click-modal="false" :visible.sync="previewVisible" :title="tf('previewTitle')">
        <el-form ref="previewFieldsForm" :rules="rules" size="small" label-width="120px">
          <el-row :gutter="10">
            <el-col :xs="24" :sm="20" :md="12" :lg="12" :xl="12">
              <el-form-item :label="tf('locale')" prop="locale">
                <Dictionary v-model="previewQry.locale" :updata-dict="previewQry.locale" :dict-key="'LOCALE'" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="20" :md="12" :lg="12" :xl="12">
              <el-form-item :label="tf('cataType')" prop="cataType">
                <Dictionary v-model="previewQry.cataType" :updata-dict="previewQry.cataType" :dict-key="'SYS_CATA_TYPE'" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="20" :md="12" :lg="12" :xl="12">
              <el-form-item :label="tf('system')">
                <el-input v-model="previewQry.system" clearable :placeholder="tf('system')" class="filter-item" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="20" :md="12" :lg="12" :xl="12">
              <el-form-item :label="tf('module')" prop="module">
                <el-select v-model="previewQry.module" :placeholder="tf('module')" clearable filterable>
                  <el-option v-for="item in menuParentList" :key="item.id" :label="item.text + ':' + item.id" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="20" :md="24" :lg="24" :xl="24">
              <el-form-item :label="tf('refer')" prop="refer">
                <el-select v-model="previewQry.refer" :placeholder="tf('refer')" multiple clearable filterable>
                  <el-option v-for="item in tables" :key="item.label" :label="item.label" :value="item.key" />
                </el-select>
              </el-form-item>
            </el-col>
            <!--<el-col :xs="24" :sm="20" :md="12" :lg="12" :xl="12">
              <el-form-item>

              </el-form-item>
            </el-col>-->
          </el-row>
          <el-row>
            <el-col>
              <!--<el-input type="textarea" rows=20 :value="previewResult" />-->
              <!--<span v-html="previewResult"></span>-->
              <!--<span> {{previewResult||{} | json}}</span>-->
              <div id="jsonDom" />
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="previewHandler">{{ tf('preview') }}</el-button>
          <el-button type="text" @click="previewVisible = false">{{ $t('btn.close') }}</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="localeCn" :label="tf('locale')" width="80px" />
        <el-table-column prop="cataTypeCn" :label="tf('cataType')" />
        <el-table-column prop="system" :label="tf('system')" />
        <el-table-column prop="module" :label="tf('module')" />
        <el-table-column prop="refer" :label="tf('refer')" />
        <el-table-column prop="code" :label="tf('code')" />
        <el-table-column prop="name" :label="tf('name')" />
        <el-table-column prop="remark" :label="tf('remark')" />
        <el-table-column prop="enabledCn" :label="tf('enabled')" width="80px" />
        <!--<el-table-column prop="createByView" label="更新用户" />-->
        <el-table-column prop="updateTime" :label="tf('updateTime')" width="135px" />
        <!-- v-if="checkPer(['admin','gaeaUiI18n:edit','gaeaUiI18n:del'])"-->
        <el-table-column :label="$t('btn.operationCol')" width="150px" align="center">
          <template slot-scope="scope">
            <udOperation :data="scope.row" :permission="permission">
              <!--<template slot="left">
                <el-button class="filter-item" size="mini" type="text"
                           @click="" >复制</el-button>
              </template>-->
            </udOperation>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />

      <preview ref="previewForm" :module="i18nQry.module" />
    </div>
  </div>
</template>

<script>
import crudGaeaUiI18n, { listI18nFields, scanI18n, getTables } from '@/api/gaeaUiI18n'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import preview from './component/detail'
import Dictionary from '@/components/Dictionary/index'
import { getParentMenuList } from '@/api/authority'
import i18nHandler from '@/mixins/i18nHandler'

import jsoneditor from 'jsoneditor'
import Vue from 'vue'
Vue.prototype.$jsoneditor = jsoneditor

const defaultForm = { id: null, locale: null, cataType: null, system: null, module: null, code: null, name: null, remark: null, enabled: 1, createBy: null, createTime: null, updateBy: null, updateTime: null, version: null }
const i18nQry = { module: 'GaeaUiI18n', refer: 'Gaea_Ui_I18n' }
import i18n from '@/lang'

export default {
  name: 'GaeaUiI18n',
  components: { Dictionary, pagination, crudOperation, rrOperation, udOperation, preview },
  mixins: [presenter(), header(), form(defaultForm), crud(), i18nHandler],

  cruds() {
    return CRUD({ title: i18n.t(i18nQry.module + '.moduleName'), url: 'business/gaeaUiI18n/pageList', idField: 'id', sort: 'update_Time', order: 'DESC', crudMethod: { ...crudGaeaUiI18n }})
  },
  data() {
    return {
      permission: {
        add: 'gaeaUiI18nController#insert',
        edit: 'gaeaUiI18nController#update',
        del: 'gaeaUiI18nController#deleteById',
      },
      dictionarys: [],
      tables: [],
      menuParentList: [],
      scanVisible: false,
      scanRefer: '',
      previewVisible: false,
      previewResult: '',
      editor: null,
      rules: {
        locale: [{ required: true, message: i18n.t('input.required', { t: i18n.t(i18nQry.module + '.locale') }), trigger: 'blur' }],
        code: [{ required: true, message: i18n.t('input.required', { t: i18n.t(i18nQry.module + '.code') }), trigger: 'blur' }],
        name: [{ required: true, message: i18n.t('input.required', { t: i18n.t(i18nQry.module + '.name') }), trigger: 'blur' }],
        remark: [{ required: true, message: i18n.t('input.required', { t: i18n.t(i18nQry.module + '.remark') }), trigger: 'blur' }],
        enabled: [{ required: true, message: i18n.t('input.required', { t: i18n.t(i18nQry.module + '.enabled') }), trigger: 'blur' }],
        refer: [{ required: true, message: i18n.t('input.required', { t: i18n.t(i18nQry.module + '.refer') }), trigger: 'blur' }],
        module: [{ required: true, message: i18n.t('input.required', { t: i18n.t(i18nQry.module + '.module') }), trigger: 'blur' }],
        cataType: [{ required: true, message: i18n.t('input.required', { t: i18n.t(i18nQry.module + '.cataType') }), trigger: 'blur' }],
      },
      /* queryTypeOptions: [
        { key: 'locale', display_name: '语言标识' },
        { key: 'cataType', display_name: '行业标识' },
        { key: 'system', display_name: '所属系统' },
        { key: 'code', display_name: '字段编码' },
        { key: 'name', display_name: '字段名称' },
        { key: 'remark', display_name: '业务描述' },
        { key: 'enabled', display_name: '启用状态' },
      ],*/
      previewQry: {
        locale: null,
        cataType: null,
        system: null,
        module: null,
        refer: null,
      },
    }
  },
  created() {
    this.crud.optShow = { add: true, edit: true, preview: true, del: false, download: false, reset: true }
    this.moduleI18nInit(i18nQry)
    this.getParentMenu()

    this.getTables()
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    async getParentMenu() {
      const { code, data } = await getParentMenuList()
      if (code != '200') return

      data.push({ id: 'generator', text: '代码生成-项目列表' })
      data.push({ id: 'alipayConfig', text: '代码生成-单表示例1' })
      data.push({ id: 'deviceInfo', text: '代码生成-设备信息' })
      data.push({ id: 'deviceModel', text: '代码生成-设备型号' })
      data.push({ id: 'deviceLogDetail', text: '代码生成-设备日志明细' })
      this.menuParentList = data
    },
    async getTables() {
      const { code, data } = await getTables()
      if (code != '200') return
      const list = []
      data.forEach((item) => {
        list.push({ label: item, key: item.split(':')[1] })
      })
      this.tables = list
    },
    scanHandler() {
      if (this.scanRefer.length < 1) {
        return
      }
      scanI18n({ table: this.scanRefer }).then((res) => {
        if (res.code == '200') {
          this.scanVisible = false
          this.$refs.scanForm.resetFields()
        }
      })
    },
    previewHandler() {
      const qry = {}
      Object.keys(this.previewQry).forEach((keys) => {
        qry[keys] = this.previewQry[keys]
      })

      const tables = qry.refer
      if (tables.length > 0) {
        var refer = tables[0]
        for (var i = 1; i < tables.length; i++) {
          refer += ',' + tables[i] + ':r' + i
        }
        qry.refer = refer
      }
      listI18nFields(qry).then((res) => {
        if (res.code == '200') {
          // this.previewVisible = false
          // this.$refs.previewFieldsForm.resetFields()
          // this.previewResult = JSON.stringify(res.data,null,4)
          const container = document.getElementById('jsonDom')
          const options = {}
          if (!this.editor) {
            this.editor = new this.$jsoneditor(container, options)
          }
          this.editor.set(res.data)
        }
      })
    },
    toPreview() {
      this.previewVisible = true
      this.$refs.previewFieldsForm.resetFields()
      if (this.editor) {
        this.editor.set({})
      }
    },
  },
}
</script>

<style scoped></style>
